<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">工作数据</block>
		</cu-custom>
		<view style="display: flex;justify-content: space-between;padding: 0 20upx;background-color: #39BB9E;color: #fff;">
			<view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view style="display: flex;font-size: 22upx;">
						<input style="height: 100upx;line-height: 100upx;text-align: right;width: 150upx;" type="text" disabled :value="date"/>
					</view>
				</picker>
			</view>
			<view style="display: flex;">
				<view style="border: 1upx solid #fff;border-radius: 20upx;height: 50upx;line-height: 50upx;text-align: center;padding: 0 20upx;margin: 25upx 15upx;">
					今日
				</view>
				<view style="border: 1upx solid #fff;border-radius: 20upx;height: 50upx;line-height: 50upx;text-align: center;padding: 0 20upx;margin: 25upx 15upx;">
					本月
				</view>
				<view style="border: 1upx solid #fff;border-radius: 20upx;height: 50upx;line-height: 50upx;text-align: center;padding: 0 20upx;margin: 25upx 15upx;">
					上月
				</view>
			</view>
		</view>
		
		<view style="display: flex;justify-content: space-between;background-color: #fff;color: #2D82E1;height: 120upx;margin-top: 20upx;padding: 0 20upx;">
			<view style="text-align: center;" :class="{active:currentIndex===index}" v-for="(item,index) in usdata" :key='index' @click="menusClick(index)">
				<view style="margin-top: 20upx;">
					{{item}}
				</view>
				<view>
					--
				</view>
			</view>
		</view>
		<scroll-view scroll-y class="indexes"
			 :scroll-with-animation="true" :enable-back-to-top="true">
				<block v-for="(item,index) in list" :key="index">
					<view :class="'indexItem-' + item.username" :id="'indexes-' + item.username" 
						:data-index="item.username" 
						@click="jump" 
						:data-src='"/pagesA/Training_program/Project_details?id="+item.userId'>
						<view class="cu-list menu-avatar no-padding">
							<view class="cu-item" style="border-bottom: 1upx solid #f5f5f5;border-top: 1upx solid #f5f5f5;margin-top: 20upx;">
								<view class="cu-avatar round lg margin-xs bg-gradual-green">
									<text class="avatar-text">
										{{ item.username ? item.username.substring(item.username.length-2) : item.username }}
									</text>
								</view>
								<view class="content">
									<view class="text-black">{{ item.username }}
									<text style="background-color: #D1EDFF;margin-left: 15upx;color: #24AFF5;border-radius: 5upx;font-size: 22upx;padding: 0 10upx;">{{item.mark}}</text>
									</view>
									<view class="text-gray text-sm">
										{{item.phone}}
									</view>
								</view>
								<view class="uni-triplex-right" style="width: 200upx;">
										<view class="status">{{item.num}}</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
			
			<view v-if="" style="width: 100%;background-color: #fff;margin-top: 20upx;">
				<image src="../../static/11.png" mode="widthFix" style="margin: 0 auto;display: block;"></image>
			</view>
	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				date: getDate({
					format: true
				}),
				currentIndex:0,
				usdata:['身体测试','训练方案','体验课','训练课','巡场服务'],
				list:[
					{
						username:'demons',
						mark:'25天后',
						phone:'18355222222',
						num:'01月01日',
					},
				],
			}
		},
		methods: {
			menusClick(index){
				this.currentIndex = index
			}
		}
	}
</script>

<style>
.active {border-bottom: 5upx solid #2D82E1;}
</style>
